<template>
  <div class="container">
    <!-- 检索区域 -->
    <div class="search-area">
      <div class="search-list">
        <div class="search-segment">
          <a-input-search :style="{ width: '320px' }" v-model="query.condition.name" :max-length="16" allow-clear
            placeholder="流程分类名称" search-button :button-props="{ type: 'secondary' }" long @press-enter="onSearch(1)"
            @search="onSearch(1)">
            <template #button-icon><icon-search /></template>
          </a-input-search>
        </div>
        <div class="search-segment">
          <a-tooltip content="重置">
            <a-button @click="onSearchReset()"> <icon-refresh /> </a-button>
          </a-tooltip>
        </div>
      </div>
      <div class="btns-list">
        <a-button type="primary" @click="onAdd">
          新建分类
          <template #icon> <icon-plus /> </template>
        </a-button>
      </div>
    </div>

    <div class="flow-inst-area">
      <div class="flow-table-content">
        <a-table :columns="columns" :scrollbar="false" :bordered="false" :hoverable="false" :data="groups"
          :pagination="false" :loading="tableLoading" @page-change="onSearch">
          <template #operations="{ record }">
            <div class="operations">
              <a-tooltip content="编辑">
                <a-button size="small" @click="onEdit(record)">
                  <template #icon> <icon-edit :size="18" /> </template>
                </a-button>
              </a-tooltip>
              <a-popconfirm type="warning" content="确认删除该流程 ?" @ok="onDelete(record)" position="tr">
                <a-button size="small">
                  <template #icon> <icon-delete :size="18" /> </template>
                </a-button>
              </a-popconfirm>
            </div>
          </template>
        </a-table>
      </div>
      <div class="fenye" v-if="query.total > 0">
        <a-pagination show-total size="small" @change="onSearch" :total="query.total" :page-size="query.pageSize"
          :current="query.pageIndex" />
      </div>
    </div>

    <!-- 新建分类 -->
    <form-modal ref="categoryModal" v-model:modal="category" @ok="onCategoryAdded($event)"></form-modal>
  </div>
</template>

<script lang="ts" setup>
import { computed, onBeforeMount, onMounted, ref, toRef } from "vue";
import { Notification } from "@arco-design/web-vue";
import {
  IconExport,
  IconFilter,
  IconRefresh,
  IconSearch,
  IconPlus,
  IconDelete,
  IconEdit,
  IconStop,
  IconCheckCircle,
} from "@arco-design/web-vue/es/icon";
import FlowManApi from "@/api/FlowManApi";
import FormModal from "./modal.vue";

const query = ref({ pageIndex: 1, pageSize: 15, total: 0, condition: {} });


// const total = toRef(pagination, 'total')
const groups = ref([]);
const tableLoading = ref(false);

const columns = ref([
  {
    title: "分类名称",
    dataIndex: "name",
  },
  {
    title: "备注",
    dataIndex: "remark",
    align: "center",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    align: "center",
  },
  {
    title: "操作",
    width: 120,
    dataIndex: "operations",
    fixed: "right",
    align: "center",
    slotName: "operations",
  },
]);

// 分类新增/编辑/删除
let category = ref({});  // 表单的值
let categoryModal = ref(); // 获取ref dom元素
const onAdd = () => {
  category.value = {}
  categoryModal.value.show();
};
const onEdit = (record) => {
  console.log("onEdit", record);
  FlowManApi.getGroupById(record.id)
    .then((resp) => {
      if (resp.code == 0) {
        category.value = resp.data
        categoryModal.value.show();
      }
    })
};
const onCategoryAdded = (group) => {
  loadFlowGroups()
};
const onDelete = (record) => {
  FlowManApi.deleteGroupById(record?.id).then((resp) => {
    if (resp.code == 0) {
      Notification.success("删除成功");
      loadFlowGroups()
    }
  });
}

// 搜索
const onSearch = (page?: number) => {
  console.log('onSearch', page)
  if (page) query.value.pageIndex = page;
  loadFlowGroups()
};
// 重置
const onSearchReset = () => {
  query.value = { pageIndex: 1, pageSize: 15, total: 0, condition: {} };
  onSearch(1);
};

// 加载list
const loadFlowGroups = () => {
  tableLoading.value = true;
  FlowManApi.pageGroups(query.value).then((resp) => {
    console.log('loadFlowGroups', resp)
    if (resp.code == 0) {
      groups.value = resp.data.list || [];
      query.value.total= resp.data.total
    }
    tableLoading.value = false;
  }).catch(() => (tableLoading.value = false));
};

onBeforeMount(() => {
  loadFlowGroups();
});
</script>

<style lang="less" scoped></style>
